<template>
  <div class="body">
    <el-container style="height: 100vh; border: 1px solid #eee">
      <el-aside class="aside" width="200px">
        <router-link tag="button" to="/" class="homebtn" type="primary">王者荣耀后台</router-link>
        <el-menu
          style="flex:1"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :default-openeds="[$route.meta.index]"
          router
          unique-opened
          default-active="$route.path"
        >
          <el-submenu index="1" class="content" v-if="content===true">
            <template slot="title">
              <i class="el-icon-setting"></i>内容管理
            </template>
            <el-menu-item-group>
              <template slot="title">物品</template>
              <el-menu-item index="/items/edit">新建物品</el-menu-item>
              <el-menu-item index="/items/list">物品列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">英雄</template>
              <el-menu-item index="/heroes/edit">新建英雄</el-menu-item>
              <el-menu-item index="/heroes/list">英雄列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">视频</template>
              <el-menu-item index="/videos/edit">新建视频</el-menu-item>
              <el-menu-item index="/videos/list">视频列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2" class="yunying" v-show="yunying==true">
            <template slot="title">
              <i class="el-icon-star-off"></i>运营管理
            </template>
            <el-menu-item-group>
              <template slot="title">文章</template>
              <el-menu-item index="/articles/edit">新建文章</el-menu-item>
              <el-menu-item index="/articles/list">文章列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">广告</template>
              <el-menu-item index="/ads/edit">新建广告</el-menu-item>
              <el-menu-item index="/ads/list">广告列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">新英雄</template>
              <el-menu-item index="/newheros/edit">新建英雄</el-menu-item>
              <el-menu-item index="/newheros/list">新英雄列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3" class="system" v-show="system==true">
            <template slot="title">
              <i class="el-icon-user"></i>系统设置
            </template>
            <el-menu-item-group>
              <template slot="title">分类</template>
              <el-menu-item index="/categories/edit">新建分类</el-menu-item>
              <el-menu-item index="/categories/list">分类列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">用户</template>
              <el-menu-item index="/admin_users/edit">新建用户</el-menu-item>
              <el-menu-item index="/admin_users/list">用户列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template slot="title">用户权限管理</template>
              <el-menu-item index="/userinfo/list">用户权限列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown @command="handleCommand">
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="check">查看</el-dropdown-item>
              <el-dropdown-item command="add">新增</el-dropdown-item>
              <el-dropdown-item command="out">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{user}}</span>
        </el-header>

        <el-main class="main">
          <el-card type="box-card" v-if="$route.path==='/'">
            <h1 class="homeinfo">欢迎用户{{user}}登录后台</h1>
            <ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
          </el-card>
          <bread v-if="$route.path!=='/'" :brlist="br"></bread>
          <router-view :key="$route.path"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style>
body {
  padding: 0;
  margin: 0;
}
.body {
  min-width: 1024px;
}
.body .aside {
  background-color: rgb(238, 241, 246);
  display: flex;
  flex-direction: column;
}
.homebtn {
  width: 100%;
  height: 60px;
  outline: none;
  text-align: center;
  cursor: pointer;
  border: none !important;
  border-top: none !important;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.main {
  background: #f1f4f5;
}
.homeinfo {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .content{
  display: none;
}
.yunying{
  display: none;
}
.system{
  display: none;
} */
</style>

<script>
import {mapMutations} from 'vuex'
import Bread from "@/components/Bread.vue";
export default {
  name: "Home",
  data() {
    this.chartSettings = {
      dimension: "内容",
      metrics: "数量"
    };
    return {
      user: "",
      userinfo:[],
      chartData: {
        columns: ["内容", "数量"],
        rows: [
          { 内容: "装备", 数量: 46 },
          { 内容: "英雄", 数量: 142 },
          { 内容: "视频", 数量: 10 },
          { 内容: "文章", 数量: 20 },
        ]
      },
      roles:[],
      content : false,
      yunying : false,
      system : false,
    };
  },
  components: {
    Bread
  },
  watch: {
    $route() {
      this.br = this.$route.meta;
    },
    content(){}
  },
  beforeCreate() {
  },
  created() {
    this.br = this.$route.meta;
    this.setUserInfo(JSON.parse(window.localStorage.user))
    
  },
  mounted() {
    this.userinfo=this.$store.state.userinfo
    this.user=this.userinfo.name
    this.roles=this.userinfo.rights
    //console.log(JSON.parse(this.userinfo))
    /* this.userinfo.rights.forEach(ele=>{
      ele.style.display="block"
    }) */
    if (this.roles.includes('内容管理')) {
      console.log(1);
      this.content=true
    }
    if (this.roles.includes('运营管理')) {
      this.yunying=true
    }
    if (this.roles.includes('系统设置')) {
      this.system=true
    }
  },
  computed: {
    
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    handleCommand(command) {
      //console.log(a);
      if (command == "check") {
        console.log(localStorage.user)
        //this.$router.push("/");
      }
      if (command == "add") {
        this.$router.push("/admin_users/edit");
      }
      if (command == "out") {
        //window.localStorage.token = "";
        //window.localStorage.username = "";
        window.localStorage.clear()
        this.$router.push("/login");
      }
    }
  }
};
</script>